<template>
  <div class="nav-outside-index">
    <nav class="nav">
      <div class="logo">
        <nuxt-link to="/">
          <img :src="webInfo.logo_index" alt="">
        </nuxt-link>
      </div>
      <div class="nav-list">
        <div>
          <ul class="page-link wihte-color">
            <li v-for="item in navList" :class="item.id==currentId?'active':''">
              <nuxt-link class="wihte-border-color  wihte-color" :to="item.router"><span>{{item.name}}</span></nuxt-link>
            </li>
          </ul>
        </div>
        <div class="wechat">
          <img src="~static/img/wechat.png" class="wechat-icon" alt=""  @mouseenter="showCode" @mouseleave="hideCode">
          <div class="erweima" :style="{height:codeHeihgt}">
            <div class="erweima-inside" >
              <img :src="webInfo.code" alt="" >
            </div>
            <div class="jiao">
              <span class="l"></span>
              <span class="r"></span>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    name: "navComponent",
    data:function(){
      return {
        webInfo:{},
        currentId:'',
        codeHeihgt:0,
        navList:[
          {
            id:1,
            name:'首页',
            router:'/'
          },
          {
            id:2,
            name:'天赋能',
            router:'/mainPage/tfn'
          },
          {
            id:3,
            name:'产业布局',
            router:'/mainPage/layout'
          },
          {
            id:4,
            name:'科技发展',
            router:'/mainPage/tech'
          },
          {
            id:5,
            name:'新闻中心',
            router:'/mainPage/news'
          },
          {
            id:6,
            name:'社会责任',
            router:'/mainPage/responsibility'
          },
          {
            id:7,
            name:'联系我们',
            router:'/mainPage/contact'
          }


        ]
      }
    },
    created(){
      this.getWebInfo();
      this.setCurrent(this.$route.path)
    },
    methods:{
      getWebInfo(){
        axios.get('http://tfngw.tfnhg.com/Api/New/get_web').then(
          res=>{
            this.webInfo = res.data;

          }
        )
      },
      selectNav(id){
        this.currentId = id;
      },
      setCurrent(path){
        let path_n = path.split('/')[2];
        let navList = this.navList;
        for(let i in navList){
          if(path_n == navList[i].router.split('/')[2]){
            this.currentId = navList[i].id
          }
        }
      },
      showCode(){
        this.codeHeihgt = '1.3rem'
      },
      hideCode(){
        this.codeHeihgt = '0'
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../assets/css/main.less";
  .nav-outside-index{
    width: 100%;
    height:1rem;
    position: absolute;
    top:0;
    left:0;
    z-index: 1000;
  }
  .nav{
    display: flex;
    flex-flow: row nowrap;
    width: 78%;
    margin: 0 auto;
    height:1rem;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  .logo{
    /*width:1.97rem;*/
    height:1rem;
  }
  .logo a{
    display: flex;
    width: 100%;
    height:1rem;
    flex-flow: column nowrap;
    justify-content: center;
  }
  .logo img{
    /*width: 100%;*/
    height:0.58rem;
  }
  .nav-list{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .page-link{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .wihte-color{
    color:#fff;
  }
  .wihte-border-color{
    border-color: #fff;
  }
  .wechat{
    width: 24px;
    padding-left:15px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    position: relative;
  }
  .wechat img{
    /*width: 100%;*/
    width: 0.22rem;
    height:0.17rem;
  }
  .wechat .erweima{
    width: 1.2rem;
    /*height:1.3rem;*/
    height:0;
    position: absolute;
    top:0.35rem;
    left:-0.37rem;
    transition: height .2s;
    overflow: hidden;
  }
  .jiao{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0.4rem;
    z-index: 999;
  }
  .jiao .l{
    width: 0;
    height:0;
    border-color: #967e62 transparent;
    border-style: solid;
    border-width: 0 0 0.2rem 0.2rem;
  }
  .jiao .r{
    width: 0;
    height:0;
    border-color: #967e62 transparent;
    border-style: solid;
    border-width: 0 0.2rem 0.2rem 0;
  }
  .erweima-inside{
    position:absolute;
    left:0;
    bottom:0;
    z-index: 1000;
    width: 1.2rem;
    height:1.2rem;
    background: #967e62;
    border-radius: 10px;
  }
  .wechat .erweima-inside img{
    width: 1rem;
    height:1rem;
    position: absolute;
    top:0;left:0;right:0;bottom:0;
    margin: auto;
  }
  .page-link{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }

  .page-link li{
    width: 0.84rem;
    text-align: center;
    font-size: 0.15rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    height:1rem;
    border-bottom: 3px solid transparent;
  }

  .page-link li>div{
    border-right-width:1px;
    border-right-style: solid;
  }

  .page-link li>a{
    display: block;
    border-right-width:1px;
    border-right-style: solid;
  }

  .page-link li>a>span{
    /*display: block;*/
    padding-bottom: 5px;
    border-bottom: 1px solid transparent;
  }
  .page-link li.active>a>span{
    border-bottom: 3px solid #fff;
  }
  .page-link li:hover>a>span{
    /*color:#006938;*/
    border-bottom-width: 3px;
    border-bottom-color:#fff;
    transition: all .6s;
  }
  .page-link-all li.active{
    /*border-bottom: 3px solid #006938;*/
  }
</style>
